<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no" />
		<title>Document</title>
		<link rel="stylesheet" href="./css/bootstrap.min.css" />
		<link rel="stylesheet" href="./css/register.css">
		<style type="text/css">
			#username-error {
				color: orangered;
			}

			#tell-error {
				color: orangered;
			}

			#password-error {
				color: orangered;
			}

			#password2-error {
				color: orangered;
			}
		</style>
	</head>

	<body>
		<header></header>

		<div class="modal show" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
			aria-hidden="true" style="position: absolute;top: 74px;">
			<div class="modal-dialog" style="top: 30%;">
				<div class="modal-content">
					<div class="modal-body">

						<form id="myform" action="" method="POST" class="form-horizontal" role="form">
							<div class="form-group text-center">
								<legend>欢迎来到我的世界！</legend>
							</div>

							<div class="form-group">
								<label for="username" class="col-sm-2 control-label">账号</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="username" name="username"
										placeholder="用户名6-8位">
								</div>
							</div>

							<div class="form-group">
								<label for="tell" class="col-sm-2 control-label">手机</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="tell" name="tell" maxlength="11"
										placeholder="请输入手机号">
								</div>
							</div>

							<div class="form-group">
								<label for="password" class="col-sm-2 control-label">密码</label>
								<div class="col-sm-10">
									<input type="password" class="form-control" id="password" name="password"
										placeholder="请输入密码">
								</div>
							</div>

							<div class="form-group">
								<label for="password2" class="col-sm-2 control-label">密码</label>
								<div class="col-sm-10">
									<input type="password" class="form-control" id="password2" name="password2"
										placeholder="确认密码">
								</div>
							</div>

							<div class="form-group">
								<div class="col-sm-3 col-sm-offset-9">
									<button onclick="fanhui()" type="button" class="btn btn-default">返回</button>
									<button type="submit" class="btn btn-primary">注册</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

		<!--footer-->
		<footer></footer>
		<!--footer-->
		<script src="./js/jquery.min.js"></script>
		<script src="./js/headerAndFooter.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/my_connect.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function fanhui() {
				history.go(-1)
			}
			$("#myform").validate({
				//调试模式 验证通过也不提交
				debug: true,
				rules: {
					// 键值对中的键 对应input的name值 ，值是对其的约束
					username: {
						required: true,
						rangelength: [6, 8]
					},
					tell: {
						required: true,
						minlength: 11
					},
					password: {
						required: true,
						rangelength: [6, 10]
					},
					password2: {
						required: true,
						rangelength: [6, 10],
						equalTo: "#password"
					}
				},
				messages: {
					username: {
						required: "用户名不能为空",
						rangelength: "必须是6到8位之间"
					},
					tell: {
						required: "电话不能为空",
						minlength: "11位手机号"
					},
					password: {
						required: "密码不能为空",
						rangelength: "必须是6到10位之间",
					},
					password2: {
						required: "密码不能为空",
						rangelength: "必须是6到10位之间",
						equalTo: "两次密码必须一致"
					}
				},
				submitHandler: async function(form) {
					//alert("提交事件!");
					//form.submit();表单进行提交
					let username = $(form).find("#username").val()
					let tell = $(form).find("#tell").val()
					let password = $(form).find("#password").val()
					let res = await ($$.register({username,tell,password}))
					if (res.status) {
						//注册成功
						alert("注册成功!请去往登陆页面进行登陆");
						location.href = "login.html";
					} else{
						alert("该电话号码已经被使用");
					}
				}
			})
		</script>
	</body>

</html>
